<template>
  <div id="settingDrawer" @click="settingClick()">
    <transition name="collapse">
      <div class="setting-box" :style="{ left: left + 'px' }" @click.stop>
        <ul class="setting-list unselect">
          <template v-for="item of menuList" :key="item.id">
            <li
              class="item"
              @click="handleMenuClick(item)"
              v-if="item.alias !== 'changeCompany' || config.can_reg_org"
            >
              <span>{{ item.name }}</span>
              <RightOutlined class="detail-icon" />
            </li>
            <a-divider v-if="item.alias == 'getHelp'"></a-divider>
          </template>
          <a-divider v-if="menuList.length > 0"></a-divider>
          <li class="item" @click="logout">
            <span>退出登录</span>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from "vue";
import defaultSetting from "../../../common/utils/defaultSetting";
import store from "../../../store";
import { RightOutlined } from "@ant-design/icons-vue";
import utils from "../../../common/utils/utils";
import invitation from "./modules/invitation.vue";
import RouteUtils from "../../../router/router.utils";

export default defineComponent({
  name: "SettingDrawer",
  components: { RightOutlined, invitation },

  props: {
    left: {
      type: Number,
      default: defaultSetting.UNCOL_WIDTH,
    },
  },
  setup(props, context) {
    const menuList = computed(() => store.getters.settingMenu);
    const config = computed(() => store.getters.basicConfig);

    const modalMenuList = ["inviteColleague", "getHelp", "changeCompany"];
    const handleMenuClick = (menu) => {
      if (modalMenuList.includes(menu.alias)) {
        settingClick(menu);
      } else {
        settingClick();
        RouteUtils.onMenuChange({ menu });
      }
    };

    const settingClick = (menu) => {
      context.emit("settingClick", { current: menu });
    };

    const logout = () => {
      settingClick();
      utils.modalConfirm({
        content: "确定退出登录吗？",
        centered: true,
        onOk: () => {
          store.dispatch("Logout");
        },
      });
    };
    return {
      menuList,
      settingClick,
      handleMenuClick,
      logout,
      config,
    };
  },
});
</script>

<style lang="less" scoped>
ul {
  padding: 0;
  margin: 0;
}
#settingDrawer {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999999;
  .setting-box {
    position: absolute;
    bottom: 0;
    width: 200px;
    left: 0;
    background: #ffffff;
    box-shadow: 4px 4px 8px 8px rgb(206 207 209 / 28%);
    .setting-list {
      padding: 10px 0;
      .item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 34px;
        cursor: pointer;
        padding: 0 15px;
        box-sizing: border-box;
        .detail-icon {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.2);
          font-weight: lighter;
        }
        &:hover {
          background: @primary-color-bg;
        }
      }

      &:deep(.ant-divider-horizontal) {
        margin: 8px 0;
      }
    }
  }
}
//transitions
.collapse-enter-active,
.collapse-leave-active {
  transition: all 0.2s ease;
  width: 200px;
}
.collapse-enter-from,
.collapse-leave-to {
  width: 0;
}
</style>
